<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
<style>
.static {
	width: 100px;
	height: 100px;
  border: 1px solid #000;
}
.active {
	background: green;
}
.text-danger {
	background: red;
}
</style>
</head>
<body>
<div id="app">
    <div class="static" :class="classObject1">1</div>
    <div class="static" :class="classObject2">2</div>
    <div class="static" :class="classObject3">3</div>
    <div class="static" :class="classObject4">4</div>
</div>

<script>
const app = {
   data() {
      return {
         isActive: true,
         error: null,
         err: 0
      }
   },
   computed: {
      classObject1() {
        console.log("this.error:",this.error)
        console.log("!this.error:",!this.error)
        console.log("!!this.error:",!!this.error)
        console.log("this.err:",this.err)
        console.log("!this.err:",!this.err)
        console.log("!!this.err:",!!this.err)
         return {
          active: this.isActive && !this.err
         }
      },
      classObject2() {
        console.log("this.error:",this.error)
        console.log("!this.error:",!this.error)
        console.log("!!this.error:",!!this.error)
        console.log("this.err:",this.err)
        console.log("!this.err:",!this.err)
        console.log("!!this.err:",!!this.err)
         return {
          active: this.isActive && this.err
         }
      },
      classObject3() {
        console.log("this.error:",this.error)
        console.log("!this.error:",!this.error)
        console.log("!!this.error:",!!this.error)
        console.log("this.err:",this.err)
        console.log("!this.err:",!this.err)
        console.log("!!this.err:",!!this.err)
         return {
          active: this.isActive || this.err
         }
      },
      classObject4() {
        console.log("4 this.error:",this.error)
        console.log("4 !this.error:",!this.error)
        console.log("4 !!this.error:",!!this.error)
        console.log("4 this.err:",this.err)
        console.log("4 !this.err:",!this.err)
        console.log("4 this.err.type:",this.err.type)
        console.log("5 this.err.type == 'fatal':",this.err.type == 'fatal')
        console.log("5 this.err.type == undefined:",this.err.type == undefined)
        console.log("5 this.err.type === undefined:",this.err.type == undefined)
        console.log("1 == 1.0:",1 == 1.0)
        console.log("1 === 1.0:",1 === 1.0)


         return {
          active: this.isActive || this.err, 'text-danger': this.err || this.err.type == 'fatal'
         }
      }
   }
}

Vue.createApp(app).mount('#app')
</script>
</body>
</html>

